<template>
  <div class="content-center-wrap">
    <div class="filter-wrap border-all">
      <span class="collapse-left-icon collapse-icon" @click="handlerCollapse('left')">
        <span v-if="collapseLeftFlag" title="缩小">
          <Icon type="icon iconfont icon-xianghou" />
        </span>
        <span v-else title="放大">
          <Icon type="icon iconfont icon-xiangqian" />
        </span>
      </span>
      <DatePicker
        transfer
        clearable
        type="daterange"
        show-week-numbers
        placement="bottom-end"
        placeholder="选择日期"
        size="small"
        split-panels
        @on-change="changeDate"
      />
      <span class="collapse-right-icon collapse-icon" @click="handlerCollapse('right')">
        <span v-if="collapseRightFlag" title="缩小">
          <Icon type="icon iconfont icon-xiangqian" />
        </span>
        <span v-else title="放大">
          <Icon type="icon iconfont icon-xianghou" />
        </span>
      </span>
    </div>
    <div class="content-box">
      <div class="top-wrap">
        <center-top />
      </div>
      <div class="bottom-wrap">
        <center-bottom />
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import CenterTop from '../CenterTop'
import CenterBottom from '../CenterBottom'
const { mapActions, mapState } = createNamespacedHelpers('negativeAnomaly')

export default {
  name: 'negative-anomaly-center',
  components: {
    CenterTop,
    CenterBottom
  },
  computed: {
    ...mapState(['currentMeterId', 'collapseLeftFlag', 'collapseRightFlag', 'currentClickTableDate'])
  },
  methods: {
    ...mapActions([
      'changeCollapse',
      'changeStartAndEndTime',
      'clearCenterTopCandData',
      'changeDefaultDate',
      'loadCenterTopCandData'
    ]),
    handlerCollapse(arg) {
      if (arg === 'left') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseLeftFlag
        })
      } else if (arg === 'right') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseRightFlag
        })
      }
    },
    changeDate(date) {
      this.changeStartAndEndTime(date)
      this.clearCenterTopCandData()
      const [startTime, endTime] = date
      if (!startTime || !endTime) {
        this.changeDefaultDate(undefined)
      }
      this.loadCenterTopCandData({
        startTime,
        endTime,
        lastMDay: this.currentClickTableDate
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content-center-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .filter-wrap {
    position: relative;
    padding: 10px;
    text-align: center;
    border-bottom: none;
  }

  .collapse-icon {
    position: absolute;
    top: 10px;
    cursor: pointer;
  }

  .collapse-left-icon {
    left: 10px;
  }

  .collapse-right-icon {
    right: 10px;
  }

  .content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .top-wrap,
  .bottom-wrap {
    flex: 1;
  }
  .top-wrap {
    margin-bottom: 10px;
  }
}
</style>
